<template>
  <div>
    <van-nav-bar
      title="线下就诊订单"
      left-text="返回"
      right-text="返回首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-notice-bar
      left-icon="volume-o"
      text="请随时关注订单状态，若超过十五分钟未处理，请拨打电话21883882进行处理"
    />
    <van-divider content-position="left">订单信息</van-divider>
    <div class="order_box">
      <el-card v-for="item in orderList" :key="item._id">
        <el-descriptions title="我的订单" :column="3" direction="vertical">
          <el-descriptions-item label="预约服务" :span="2"
            ><el-tag size="mini" type="danger">{{
              item.message
            }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="姓名"
            ><el-tag size="mini">{{ item.name }}</el-tag></el-descriptions-item
          >
          <el-descriptions-item label="手机号">{{
            item.phone
          }}</el-descriptions-item>
          <el-descriptions-item label="居住地" :span="3">{{
            item.address
          }}</el-descriptions-item>
          <el-descriptions-item label="下单时间" :span="3">{{
            item.orderDate
          }}</el-descriptions-item>
          <el-descriptions-item label="就诊时间" :span="2">
            <el-tag v-if="item.offlineDate === null" size="mini" type="danger"
              >未处理</el-tag
            >
            <el-tag v-else size="mini">{{ item.offlineDate }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag v-if="item.status === 0" type="warning" size="mini"
              >正在进行</el-tag
            >
            <el-tag v-else type="success" size="mini">已完成</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      patientID: window.sessionStorage.getItem('id'),
      orderList: []
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/offline')
    },
    onClickRight () {
      this.$router.push('/index')
    },
    async getorderList () {
      const { data: res } = await this.$http.get(
        '/api/offline/myorder/' + this.patientID
      )
      if (res.status !== 200) return this.$message.error('获取订单列表失败')
      this.orderList = res.orderList
    }
  },
  created () {
    this.getorderList()
  }
}
</script>

<style scoped>
.el-descriptions {
  box-sizing: border-box;
  border-bottom: 1px solid lightcoral;
  font-size: 10px !important;
}
.order_box{
  height: 500px;
  overflow: scroll;
}
</style>
